<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">
    <h3>欢迎你：{{user.username}}，你的角色是：{{user.role}}</h3>

    <div v-if="msgList.length>0">
        这里是你的未读消息：
        <p v-for="m  in msgList">
            {{m.msg}}
            <el-button @click="updateMsg(m.id)" type="text">标记为已读</el-button>
        </p>
    </div>

    <hr>

    <el-input v-model="query.name" placeholder="请输入书名" style="width: 200px;" clearable></el-input>
    <el-input v-model="query.author" placeholder="请输入作者" style="width: 200px;" clearable></el-input>
    <el-select v-model="query.cid" placeholder="请选择出版社" clearable>
        <el-option
                v-for="item in componyList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
        </el-option>
    </el-select>

    <el-button type="primary" @click="toAdd" v-if="user.role=='管理员'">添加</el-button>
    <el-button @click="goList">借阅列表</el-button>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID">
        </el-table-column>
        <el-table-column
                prop="name"
                label="书名">
        </el-table-column>
        <el-table-column
                prop="author"
                label="作者">
        </el-table-column>
        <el-table-column
                prop="nums"
                label="借阅次数">
        </el-table-column>
        <el-table-column
                prop="cname"
                label="出版社">
        </el-table-column>
        <el-table-column
                prop="state"
                label="借阅状态">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button v-if="user.role=='管理员'"  size="mini" @click="toEdit(scope.row)">编辑</el-button>
                <el-button v-if="user.role=='管理员'" size="mini" type="danger" @click="delOne(scope.row.id)">删除</el-button>
                <el-button v-if="user.role=='普通用户'" size="mini" @click="jieyue(scope.row.id)" >借阅</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog :title="mode.title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="书名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者" :label-width="formLabelWidth">
                <el-input v-model="form.author" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出版社" :label-width="formLabelWidth">
                <el-select v-model="form.cid" placeholder="请选择出版社">
                    <el-option
                            v-for="item in componyList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addData">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{},
            tableData: [],
            query:{
                name:"",
                author:"",
                cid:"",
                state:"",//图书状态
                page:1,
                pageSize:2
            },
            total:0,
            componyList:[],//出版社列表

            mode:{
                title:"",
                url:""
            },
            dialogFormVisible: false,
            form: {
                name: '',
                author:"",
                cid:"",
                state:"未借阅",
                nums:0,
            },
            formLabelWidth: '120px',
            msgList:[],
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },
        methods:{
            updateMsg(id){
                let msg = {
                    id:id,
                    "state":"已读"
                }
                axios.post("/user-msg/update",msg).then(res=>{
                    this.$message.success("已读 成功")

                    this.initMsg();


                })
            },
            goList(){
                window.open("/readlist.html")
            },
            jieyue(id){
                /**
                 * 设置图书状态为：借阅中
                 * 借阅次数+1
                 * 添加借阅记录
                 */
                axios.post(`/book/readBook?bid=${id}&uid=${this.user.id}`).then(res=>{
                    this.$message.success("借阅 成功")
                    this.initData();
                })

            },
            delOne(id){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/book/deleteOne?id="+id).then(res=>{
                        this.$message.success("删除 成功")
                        this.initData()
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            toEdit(row){
                this.form = JSON.parse(JSON.stringify(row));

                this.mode = {
                    title:"修改图书",
                    url:"/book/update"
                }
                this.dialogFormVisible = true;
            },
            addData(){

                axios.post(this.mode.url,this.form).then(res=>{

                    this.$message.success(this.mode.title+" 成功")

                    this.form = {
                        name: '',
                        author:"",
                        cid:"",
                        state:"未借阅",
                        nums:0,
                    }
                    this.dialogFormVisible = false;
                    this.initData();

                })

            },
            toAdd(){
                this.mode = {
                    title:"添加图书",
                    url:"/book/add"
                }
                this.dialogFormVisible = true;
            },
            handleSizeChange(val) {
                this.query.pageSize =val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            initData(){
                //page
                axios.post(`/book/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;

                    if(this.tableData.length==0&&this.query.page>1){
                        this.query.page--
                    }
                })

            },
            initConponyList(){
                axios.post("/compony/findAll").then(res=>{
                    this.componyList = res.data;
                })
            },
            initMsg(){
                axios.post("/user-msg/findMyUnreadMsg?uid="+this.user.id).then(res=>{
                    this.msgList = res.data;
                })


            }

        },
        created(){

            var userStr = localStorage.getItem("user_tushu_06");

            this.user = JSON.parse(userStr);

            if(this.user.role=="普通用户"){
                this.query.state = "未借阅";

                this.initMsg();
            }


            this.initConponyList();
            this.initData()
        }
    })
</script>


</body>
</html>
